<template>
  <div class="maxBox">
    <div class="smallTitle">材料列表</div>
    <el-table :data="list" style="width: 100%" highlight-current-row border height="56vh" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
      <el-table-column prop="materialName" label="材料名称">
        <template slot="header">
          <el-input clearable @input="getList" v-model="searchVal" size="mini" prefix-icon="el-icon-search" placeholder="请输入物料" />
        </template>
      </el-table-column>
      <el-table-column prop="specs" label="规格"/>
      <el-table-column prop="materialDefaultAmout" label="单价">
        <template slot-scope="scope">
          <span v-if="scope.row.materialDefaultAmout">￥{{scope.row.materialDefaultAmout.toFixed(2)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="unit" label="单位" width="50" />
      <el-table-column prop="unit" label="选择数量" width="160">
        <template slot-scope="{row}">
          <el-input-number v-model="row.materialNum" :min="0" size="mini"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="img" label="图片" width="90">
        <template slot-scope="{row}">
          <el-image style="width: 60px; height: 60px" :src="row.img"  :preview-src-list="srcList" :z-index="9999"	></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="85" fixed="right">
        <template slot-scope="{row}">
          <el-button type="primary" @click="selectMater(row)" size="mini">添加</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination style="padding-top:10px" :page-size="pageSize" @size-change="handleSizeChange" :page-sizes="[10, 50, 100, 200]" layout=" prev, pager, next, total,sizes,jumper" @current-change="currentChange" :current-page="pageNum" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { listMaterial } from "../../../network/business";
export default {
  data() {
    return {
      list: [],
      pageNum: 1,
      pageSize: 10,
      searchVal: "",
      total: 0,
      srcList:[]
    };
  },
  methods: {
    selectMater(row) {
      if (!row.materialNum) {
        this.$error("请选择数量");
        return;
      }
      let list = this.$parent.$parent.$refs.selectList.list;
      if (JSON.stringify(list).includes(row.materialCode)) {
        this.$error("不可重复添加同一材料！");
        return;
      }
      let obj = JSON.parse(JSON.stringify(row));
      list.push(obj);
      this.$parent.$parent.$refs.selectList.srcList=list.map(item=>item.img)
      row.materialNum = 1;
      this.$forceUpdate();
    },
    currentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    //获取材料列表
    getList() {
      listMaterial({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        searchVal: this.searchVal,
      }).then((res) => {
        if (res.code == 200) {
          res.data.content.forEach((item) => {
            item.materialNum = 1;
          });
          this.list = res.data.content;
          this.total = res.data.totalSize;
          this.srcList=res.data.content.map(item=>item.img)
        }
      });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.maxBox ::v-deep {
  th {
    background: #fafafa;
    color: #000;
  }
  .el-pagination {
    padding-top: 10px;
    text-align: right;
  }
  td {
    padding: 5px 0;
  }
}
</style>